<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>天气</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<!--引入公用样式-->
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<style>  
			html,
			body {
				background-color: #009be0 !important;
			}
			.asdf{
				background-color: #009be0;
			}
			.asrqw,.sadwe{
				color: white;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav asdf">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left asrqw"></a>
			<h1 class="mui-title sadwe">梦回鸿蒙提醒您<small>(首次加载耐心等待哦！)</small></h1>
		</header>
		<div class="mui-content">
			<div class="weather-box bs-bb">
				<div class="wt-hb bs-bb dp-n" id="results">
					<!--城市-->
					<div class="citybox">
						<span>梦回鸿蒙提醒您:注意天气,保护身体</span><br>
						<span class="cityname c-ff smFontSize" id="city"></span>
					</div>
					<!--天气-->
					<div class="wh-sk ta-c bs-bb">
						<div class="wh-img bs-bb">
							<img src="../images/weather/tq7.png" alt="" id="whimg" />
						</div>
						<div class="mui-row">
							<div class="mui-col-xs-6 ta-r wh-msg wh-lmsg">
								<span class="wh-bigFontSize c-ff" id="tmp"></span>
							</div>
							<div class="mui-col-xs-6 ta-l wh-msg wh-rmsg">
								<div>
									<span class="c-ff smFontSize">℃</span>
								</div>
								<div>
									<span class="c-ff smFontSize" id="cond_txt"></span>
								</div>
							</div>
						</div>
					</div>
					<!--详细信息-->
					<div class="sixbox mui-row c-ff">
						<div class="mui-col-xs-2 bs-bb">
							<div class="ta-c">
								<span class="smFontSize">体感</span>
							</div>
							<div class="ta-c">
								<img class="xsimg" src="../images/tfwd.png" alt="" />
							</div>
							<div class="ta-c">
								<span class="smFontSize" id="fl"></span>
							</div>
						</div>
						<div class="mui-col-xs-2 bs-bb">
							<div class="ta-c">
								<span class="smFontSize">湿度</span>
							</div>
							<div class="ta-c">
								<img class="xsimg" src="../images/sd.png" alt="" />
							</div>
							<div class="ta-c">
								<span class="smFontSize" id="hum"></span>
							</div>
						</div>
						<div class="mui-col-xs-2 bs-bb">
							<div class="ta-c">
								<span class="smFontSize">降水量</span>
							</div>
							<div class="ta-c">
								<img class="xsimg" src="../images/jstj.png" alt="" />
							</div>
							<div class="ta-c">
								<span class="smFontSize" id="pcpn"></span>
							</div>
						</div>
						<div class="mui-col-xs-2 bs-bb">
							<div class="ta-c">
								<span class="smFontSize">风向</span>
							</div>
							<div class="ta-c">
								<img class="xsimg" src="../images/fx.png" alt="" />
							</div>
							<div class="ta-c">
								<span class="smFontSize" id="wind_dir"></span>
							</div>
						</div>
						<div class="mui-col-xs-2 bs-bb">
							<div class="ta-c">
								<span class="smFontSize">风力</span>
							</div>
							<div class="ta-c">
								<img class="xsimg" src="../images/fl.png" alt="" />
							</div>
							<div class="ta-c">
								<span class="smFontSize" id="wind_sc"></span>
							</div>
						</div>
						<div class="mui-col-xs-2 bs-bb">
							<div class="ta-c">
								<span class="smFontSize">风速</span>
							</div>
							<div class="ta-c">
								<img class="xsimg" src="../images/fs.png" alt="" />
							</div>
							<div class="ta-c">
								<span class="smFontSize" id="wind_spd"></span>
							</div>
						</div>
					</div>
					<!--分割线-->
					<div class="fgx bs-bb">
						<div></div>
					</div>
					<!--3-10天的天气-->
					<div class="daymsg bs-bb">
						<!--今天-->
						<div class="bs-bb mui-row smFontSize daylist c-ff">
							<div class="mui-col-xs-4">
								<b>今天</b>
								<span id="today"></span>
							</div>
							<div class="mui-col-xs-4 ta-c">
								<span style="position: relative;">
									<img class="listday" src="" alt=""  id="todayimg"/>
								</span>
								<span id="todaytext"></span>
							</div>
							<div class="mui-col-xs-4 ta-r">
								<span id="todaywd"></span>
							</div>
						</div>
						<!--明天-->
						<div class="bs-bb mui-row smFontSize daylist c-ff">
							<div class="mui-col-xs-4">
								<b>明天</b>
								<span id="tomorrow"></span>
							</div>
							<div class="mui-col-xs-4 ta-c">
								<span style="position: relative;">
									<img class="listday" src="" alt=""  id="tomorrowimg"/>
								</span>
								<span id="tomorrowtext"></span>
							</div>
							<div class="mui-col-xs-4 ta-r">
								<span id="tomorrowwd"></span>
							</div>
						</div>
						<!--后天-->
						<div class="bs-bb mui-row smFontSize daylist c-ff">
							<div class="mui-col-xs-4">
								<b>后天</b>
								<span id="afterTomorrow"></span>
							</div>
							<div class="mui-col-xs-4 ta-c">
								<span style="position: relative;">
									<img class="listday" src="" alt=""  id="afterTomorrowimg"/>
								</span>
								<span id="afterTomorrowtext"></span>
							</div>
							<div class="mui-col-xs-4 ta-r">
								<span id="afterTomorrowwd"></span>
							</div>
						</div>
					</div>
				</div> 
			</div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data-3.js"></script>
		<script type="text/javascript"> 
			mui.init();
			//和风天气认证key     	b9a52c277318451284824f4756adb9fa
			//实况天气
			/* 实况：https://free-api.heweather.com/s6/weather/now?
			 * 3-10天：https://free-api.heweather.com/s6/weather/forecast?
			 * 逐小时预报：https://free-api.heweather.com/s6/weather/hourly?
			 * 生活指数：https://free-api.heweather.com/s6/weather/lifestyle?
			 * 
			 * 例子
			 * https://free-api.heweather.com/s6/weather/now?key=	
b9a52c277318451284824f4756adb9fa&location=北京
			 **/
			//全局变量

			mui.plusReady(function() {
				//获取当前地理位置信息
				plus.geolocation.getCurrentPosition(function(res) {
					//alert(JSON.stringify(data))
					console.log(JSON.stringify(res));
					plus.nativeUI.showWaiting("加载中...");
					//请求数据
					var url = 'https://free-api.heweather.com/s6/weather/now?key=b9a52c277318451284824f4756adb9fa&location=' + res.coords.longitude + ',' + res.coords.latitude;
					mui.ajax(url, {
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						headers: {
							'Content-Type': 'application/json'
						},
						success: function(data) {
							if(data.HeWeather6[0].status == "ok") {
								var dz = data.HeWeather6[0].basic.admin_area + " " + data.HeWeather6[0].basic.parent_city + " " + data.HeWeather6[0].basic.location;
								var data = data.HeWeather6[0].now;
								//赋值
								document.getElementById('whimg').setAttribute('src', '../images/weather1/' + data.cond_code + '.svg')
								document.getElementById('city').innerText = dz;
								document.getElementById('cond_txt').innerText = data.cond_txt;
								document.getElementById('wind_dir').innerText = data.wind_dir;
								document.getElementById('wind_sc').innerText = data.wind_sc;
								document.getElementById('wind_spd').innerText = data.wind_spd;
								document.getElementById('hum').innerText = data.hum;
								document.getElementById('tmp').innerText = data.tmp;
								document.getElementById('fl').innerText = data.fl;
								document.getElementById('pcpn').innerText = data.pcpn;
								//请求3-10天的天气信息
								//请求数据
								var url = 'https://free-api.heweather.com/s6/weather/forecast?key=b9a52c277318451284824f4756adb9fa&location=' + res.coords.longitude + ',' + res.coords.latitude;
								mui.ajax(url, {
									dataType: 'json', //服务器返回json格式数据
									type: 'post', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；
									headers: {
										'Content-Type': 'application/json'
									},
									success: function(res1) {
										plus.nativeUI.closeWaiting();
										if(res1.HeWeather6[0].status == "ok") {
											//今天
											var todaylist = res1.HeWeather6[0].daily_forecast[0];
											//赋值
											document.getElementById('todayimg').setAttribute('src', '../images/weather1/' + todaylist.cond_code_d + '.svg')
											document.getElementById('today').innerText = todaylist.date;
											document.getElementById('todaytext').innerText = todaylist.cond_txt_d;
											document.getElementById('todaywd').innerText = todaylist.tmp_min + "~" + todaylist.tmp_max;
											//明天
											var tomorrow = res1.HeWeather6[0].daily_forecast[1];
											//赋值
											document.getElementById('tomorrowimg').setAttribute('src', '../images/weather1/' + tomorrow.cond_code_d + '.svg')
											document.getElementById('tomorrow').innerText = tomorrow.date;
											document.getElementById('tomorrowtext').innerText = tomorrow.cond_txt_d;
											document.getElementById('tomorrowwd').innerText = tomorrow.tmp_min + "~" + tomorrow.tmp_max;
											//后天
											var afterTomorrow = res1.HeWeather6[0].daily_forecast[2];
											//赋值
											document.getElementById('afterTomorrowimg').setAttribute('src', '../images/weather1/' + afterTomorrow.cond_code_d + '.svg')
											document.getElementById('afterTomorrow').innerText = afterTomorrow.date;
											document.getElementById('afterTomorrowtext').innerText = afterTomorrow.cond_txt_d;
											document.getElementById('afterTomorrowwd').innerText = afterTomorrow.tmp_min + "~" + afterTomorrow.tmp_max;

											document.getElementById("results").className = "wt-hb bs-bb";
										} else {
											plus.nativeUI.toast("天气获取失败！");
										}

									},
									error: function(xhr, type, errorThrown) {
										plus.nativeUI.closeWaiting();
									}
								});
								document.getElementById("results").className = "wt-hb bs-bb";
							} else {
								plus.nativeUI.toast("天气获取失败！");
							}

						},
						error: function(xhr, type, errorThrown) {
							plus.nativeUI.closeWaiting();
						}
					});
				}, function(e) {});
				/*
				 * 选择城市
				 * 
				 * */
				/**
				 * 获取对象属性的值
				 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
				 * @param {Object} obj 对象
				 * @param {String} param 属性名
				 */
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};
				var cityPicker = new mui.PopPicker({
					layer: 3
				});
				cityPicker.setData(cityData);
				var showCityPickerButton = document.getElementById('city');
				var cityResult = document.getElementById('city');
				showCityPickerButton.addEventListener('tap', function(event) {
					cityPicker.show(function(items) {

						//address = _getParam(items[2], 'text');
						plus.nativeUI.showWaiting("加载中...");
						var urll = 'https://free-api.heweather.com/s6/weather/now?key=b9a52c277318451284824f4756adb9fa&location=' + _getParam(items[2], 'text');
						mui.ajax(urll, {
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								console.log(JSON.stringify(data));
								if(data.HeWeather6[0].status == "ok") {
									var data = data.HeWeather6[0].now;
									//赋值
									document.getElementById('whimg').setAttribute('src', '../images/weather1/' + data.cond_code + '.svg')
									document.getElementById('city').innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
									document.getElementById('cond_txt').innerText = data.cond_txt;
									document.getElementById('wind_dir').innerText = data.wind_dir;
									document.getElementById('wind_sc').innerText = data.wind_sc;
									document.getElementById('wind_spd').innerText = data.wind_spd;
									document.getElementById('hum').innerText = data.hum;
									document.getElementById('tmp').innerText = data.tmp;
									document.getElementById('fl').innerText = data.fl;
									document.getElementById('pcpn').innerText = data.pcpn;
									//请求3-10天的天气信息
									//请求数据
									var url = 'https://free-api.heweather.com/s6/weather/forecast?key=b9a52c277318451284824f4756adb9fa&location=' +_getParam(items[2], 'text');
									mui.ajax(url, {
										dataType: 'json', //服务器返回json格式数据
										type: 'post', //HTTP请求类型
										timeout: 10000, //超时时间设置为10秒；
										headers: {
											'Content-Type': 'application/json'
										},
										success: function(res1) {
											plus.nativeUI.closeWaiting();
											if(res1.HeWeather6[0].status == "ok") {
												//今天
												var todaylist = res1.HeWeather6[0].daily_forecast[0];
												//赋值
												document.getElementById('todayimg').setAttribute('src', '../images/weather1/' + todaylist.cond_code_d + '.svg')
												document.getElementById('today').innerText = todaylist.date;
												document.getElementById('todaytext').innerText = todaylist.cond_txt_d;
												document.getElementById('todaywd').innerText = todaylist.tmp_min + "~" + todaylist.tmp_max;
												//明天
												var tomorrow = res1.HeWeather6[0].daily_forecast[1];
												//赋值
												document.getElementById('tomorrowimg').setAttribute('src', '../images/weather1/' + tomorrow.cond_code_d + '.svg')
												document.getElementById('tomorrow').innerText = tomorrow.date;
												document.getElementById('tomorrowtext').innerText = tomorrow.cond_txt_d;
												document.getElementById('tomorrowwd').innerText = tomorrow.tmp_min + "~" + tomorrow.tmp_max;
												//后天
												var afterTomorrow = res1.HeWeather6[0].daily_forecast[2];
												//赋值
												document.getElementById('afterTomorrowimg').setAttribute('src', '../images/weather1/' + afterTomorrow.cond_code_d + '.svg')
												document.getElementById('afterTomorrow').innerText = afterTomorrow.date;
												document.getElementById('afterTomorrowtext').innerText = afterTomorrow.cond_txt_d;
												document.getElementById('afterTomorrowwd').innerText = afterTomorrow.tmp_min + "~" + afterTomorrow.tmp_max;

												document.getElementById("results").className = "wt-hb bs-bb";
											} else {
												plus.nativeUI.toast("天气获取失败！");
											}

										},
										error: function(xhr, type, errorThrown) {
											plus.nativeUI.closeWaiting();
										}
									});
									document.getElementById("results").className = "wt-hb bs-bb";
								} else {
									plus.nativeUI.toast("天气获取失败！");
								}

							},
							error: function(xhr, type, errorThrown) {
								plus.nativeUI.closeWaiting();
							}
						});
					});
				}, false);

			})
		</script>
	</body>

</html>